<template>
  <div>
    <navigationBar/>
    <div class="personalCenter-container">
      <div class="teacher">
        <div class="teacher-avatar">
          <v-avatar size="200">
            <v-img :src="userInfo.avatar">
              <template v-slot:placeholder>
                <v-icon>
                  fas fa-user-graduate
                </v-icon>
              </template>
            </v-img>
          </v-avatar>
        </div>
        <div class="teacher-info">
          <el-descriptions title="用户信息">
            <el-descriptions-item label="用户名">{{userInfo.nickname}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{ userInfo.province.name }}</el-descriptions-item>
            <el-descriptions-item label="年龄">
              <el-tag size="small">{{userInfo.age}} 岁</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="邮箱"> {{userInfo.email}}</el-descriptions-item>
          </el-descriptions>
        </div>

      </div>
      <div class="list">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的课程" name="first">


            <div class="detail-content course-card-container justify-start">
              <div
                  class="course-card my-2"
                  v-for="course in courseList"
                  :key="course.id"
                  v-ripple>
                <v-img
                    :src="course.pic"></v-img>
                <div class="course-info">
                  <div>
                    <p class="course-title">{{ course.name }}</p>
                    <p class="course-teacher">{{ userInfo.nickname }}</p>
                    <p class="course-category">{{ course.st | formatCourseCategory }}</p>
                  </div>
                  <div class="course-price align-end">
                    <p class="price__current">
                      {{ course.price | formatPrice }}
                    </p>
                    <p class="price__original" v-if="course.price_old">
                      {{ course.price_old | formatPrice }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的博客" name="second">
            <div>
              <div class="result-container">
                <div
                    class="filter-container"
                    :class="isShowFilter && windowWidth > 900 ? '' : 'filter-container__hidden'">

                </div>
                <div
                    class="result-list">
                  <div
                      class="result-item"
                      v-for="item in searchResultList"
                      :key="item.id"
                      @click="gotoBolgDetail(item.id)">

                    <div class="item-info">
                      <div class="item-title">
                        {{ item.title }}
                      </div>
                      <div class="item-desc">
                        <div>
                          {{ item.overview }}
                        </div>
                      </div>
                      <div class="item-detail">
              <span >
                评论数量：{{ item.commentCount }}
              </span>
                        <span>
                访问数量: {{ item.viewCount }}
              </span>
                        <span>
                {{ item.level | formatBlogLevel }}
              </span>
                        <span v-if="item.recommend">
                精华
              </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <v-pagination
                  class="my-10"
                  v-model="currentPage"
                  :length="totalPage"
                  circle/>
              <v-navigation-drawer
                  class="deep-grey"
                  v-model="isShowAsideFilter"
                  absolute
                  temporary
                  left
                  width="260px"
                  @close="isShowAsideFilter = false">

              </v-navigation-drawer>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的评论" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </div>

    </div>
  </div>
</template>

<script>
import navigationBar from "@/components/navigationBar/navigationBar";
import {formatCourseCategory} from "@/common/js/utils";
import {getBolgListBySearch} from "../../api";

export default {
  name: "personalCenter",
  components: {
    navigationBar
  },
  data() {
    return {
      userInfo: {}, //用户信息,
      activeName: "first",
      courseList: [
        {
          "id": "4028e581617f945f01617f9dabc40000",
          "name": "vue入门到开发",
          "users": "",
          "mt": "1-1",
          "st": "1-1-1",
          "grade": "200002",
          "description": "Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。",
          "status": "202002",
          "companyid": "2",
          "studymodel": null,
          "teachmode": null,
          "userid": "402885816243d2dd016243f24c030002",
          "lessonNum": null,
          "buyCount": null,
          "viewCount": null,
          "gmtCreate": null,
          "gmtModified": null,
          "pic": "https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg",
          "price": "170.0",
          "price_old": "100.0"
        },
        {
          "id": "4028e58161bcf7f40161bcf8b77c0000",
          "name": "spring cloud实战",
          "users": "所有人",
          "mt": "1-3",
          "st": "1-3-2",
          "grade": "200003",
          "description": "本课程主要从四个章节进行讲解： 1.微服务架构入门 2.spring cloud 基础入门 3.实战Spring Boot 4.注册中心eureka。",
          "status": "202002",
          "companyid": "1",
          "studymodel": null,
          "teachmode": null,
          "userid": "402885816243d2dd016243f24c030002",
          "lessonNum": null,
          "buyCount": null,
          "viewCount": null,
          "gmtCreate": null,
          "gmtModified": null,
          "pic": "https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg",
          "price": "70.0",
          "price_old": "100.0"
        },
        {
          "id": "4028e58161bd3b380161bd3bcd2f0000",
          "name": "c++入门基础",
          "users": "",
          "mt": "1-3",
          "st": "1-3-1",
          "grade": "200002",
          "description": "C++ 是一种高级语言，它是由 Bjarne Stroustrup 于 1979 年在贝尔实验室开始设计开发的。C++ 进一步扩充和完善了 C 语言，是一种面向对象的程序设计语言。C++ 可运行于多种平台上，如 Windows、MAC 操作系统以及 UNIX 的各种版本。",
          "status": "202002",
          "companyid": "1",
          "studymodel": null,
          "teachmode": null,
          "userid": "402885816243d2dd016243f24c030002",
          "lessonNum": null,
          "buyCount": null,
          "viewCount": null,
          "gmtCreate": null,
          "gmtModified": null,
          "pic": "https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg",
          "price": "27.0",
          "price_old": "100.0"
        },
        {
          "id": "4028e581617f945f01617f9dabc400100",
          "name": "vue入门到开发",
          "users": "",
          "mt": "1-1",
          "st": "1-1-1",
          "grade": "200002",
          "description": "Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。",
          "status": "202002",
          "companyid": "2",
          "studymodel": null,
          "teachmode": null,
          "userid": "402885816243d2dd016243f24c030002",
          "lessonNum": null,
          "buyCount": null,
          "viewCount": null,
          "gmtCreate": null,
          "gmtModified": null,
          "pic": "https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg",
          "price": "170.0",
          "price_old": "100.0"
        },
        {
          "id": "4028e58161bcf7f40161bcf8b77c20000",
          "name": "spring cloud实战",
          "users": "所有人",
          "mt": "1-3",
          "st": "1-3-2",
          "grade": "200003",
          "description": "本课程主要从四个章节进行讲解： 1.微服务架构入门 2.spring cloud 基础入门 3.实战Spring Boot 4.注册中心eureka。",
          "status": "202002",
          "companyid": "1",
          "studymodel": null,
          "teachmode": null,
          "userid": "402885816243d2dd016243f24c030002",
          "lessonNum": null,
          "buyCount": null,
          "viewCount": null,
          "gmtCreate": null,
          "gmtModified": null,
          "pic": "https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg",
          "price": "70.0",
          "price_old": "100.0"
        },
        {
          "id": "4028e58161bd3b380161bd3bcd2f00300",
          "name": "c++入门基础",
          "users": "",
          "mt": "1-3",
          "st": "1-3-1",
          "grade": "200002",
          "description": "C++ 是一种高级语言，它是由 Bjarne Stroustrup 于 1979 年在贝尔实验室开始设计开发的。C++ 进一步扩充和完善了 C 语言，是一种面向对象的程序设计语言。C++ 可运行于多种平台上，如 Windows、MAC 操作系统以及 UNIX 的各种版本。",
          "status": "202002",
          "companyid": "1",
          "studymodel": null,
          "teachmode": null,
          "userid": "402885816243d2dd016243f24c030002",
          "lessonNum": null,
          "buyCount": null,
          "viewCount": null,
          "gmtCreate": null,
          "gmtModified": null,
          "pic": "https://learnercms.oss-cn-beijing.aliyuncs.com/avatar/2021/10/25/c581b7b0-64ab-414a-917f-27ccde67bcbd.jpg",
          "price": "27.0",
          "price_old": "100.0"
        }
      ],
      isShowFilter: this.showFilter, //是否显示过滤器
      isShowAsideFilter: false, //是否显示侧边弹出过滤器
      searchResultList: [], //搜索结果列表
      currentPage: 1, //当前页码
      totalPage: 4, //总页数
    }
  },
  methods: {
    // 初始化
    init() {
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      this.getSearchResult();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    gotoBolgDetail(id) {
      this.$router.push(`/blog/${id}`);
    },
    getSearchResult() {
      getBolgListBySearch(this.currentPage, 5,"","",this.userInfo.id).then(res => {
        this.searchResultList = res.data.records
      }).catch(err => {
        console.error(err);
      });
    }
  },
  filters: {
    /**
     * 格式化课程分类
     * @param {String} st 课程小分类ID
     * @return {String} 格式化后的课程分类文字
     */
    formatCourseCategory(st) {
      const category = formatCourseCategory(st);
      return `${category.mt} / ${category.st}`;
    },

    formatTeacherLevel(level) {
      return ['', "最新", '热门'][Number(level)];
    },
  },
  watch: {
    windowWidth(nval, oval) {
      if (nval < oval && nval < 800) {
        this.isShowFilter = false; //在窗口宽度低于800的时候关闭过滤器
      } else if (nval > oval && nval > 800) {
        this.isShowAsideFilter = false; //在窗口宽度高于800的时候关闭侧边弹出过滤器
        this.isShowFilter = true;
      }
    },
    getShowFilter(nval) {
      this.isShowFilter = this.getShowFilter;
    },
    isShowFilter(nval, oval) {
      if (nval !== oval) {
        this.$emit('switchFilter', nval);
        if (this.windowWidth <= 800) {
          this.isShowAsideFilter = this.isShowFilter;
        }
      }
    },
    isShowAsideFilter(nval, oval) {
      if (nval !== oval) {
        this.$emit('switchFilter', nval);
      }
    },
    searchValue() {
      this.getSearchResult();
    },
    currentPage() {
      this.getSearchResult();
    }
  },
  mounted() {
  },
  created() {
    this.init();
  },
  computed: {
    // 屏幕宽度实时数值
    windowWidth() {
      return this.$store.state.screenWidth + 5;
    },
    // 映射props中的type，强制在值变化时触发监听器
    getShowFilter() {
      return this.showFilter;
    },
    // 搜索关键词
    searchValue() {
      return this.value;
    }
  },
}
</script>

<style lang="scss" scoped>
@import "personalCenter";
</style>